<template>
  <div class="hello">
    <div>
      <p @click="$store.commit('add')">counter:{{ $store.state.counter }}</p>
      <p @click="$store.dispatch('add')">
        async counter:{{ $store.state.counter }}
      </p>
      <p>dobule counter:{{ $store.getters.doubleCounter }}</p>
    </div>
    <button @click="$router.push('foo')">
      to foo
    </button>
    <kForm :model="form" :rules="rules" ref="form">
      <k-form-item label="用户名" prop="userName">
        <k-input v-model="form.userName" placeholder="请输入账号"></k-input>
      </k-form-item>
      <k-form-item label="密码" prop="passWord">
        <k-input v-model="form.passWord" placeholder="请输入密码"></k-input>
      </k-form-item>
      <k-form-item>
        <button @click="submitForm">按钮</button>
      </k-form-item>
    </kForm>
  </div>
</template>

<script>
import kInput from "../KForm/kinput";
import kFormItem from "../KForm/kform-item";
import kForm from "../KForm/kform";
export default {
  name: "HelloWorld",
  components: {
    kInput,
    kForm,
    kFormItem,
  },
  data() {
    return {
      form: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
          },
        ],
        passWord: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          // alert('submit')
          this.$notice({
            title: "提示",
            message: "这是一个提示信息",
            duration: 3000,
          }).show();
        } else {
          console.warn("error");
        }
      });
    },
    deepClone(target) {
      // 定义一个变量
      let result;
      // 如果当前需要深拷贝的是一个对象的话
      if (typeof target === "object") {
        // 如果是一个数组的话
        if (Array.isArray(target)) {
          result = []; // 将result赋值为一个数组，并且执行遍历
          for (let i in target) {
            // 递归克隆数组中的每一项
            result.push(this.deepClone(target[i]));
          }
          // 判断如果当前的值是null的话；直接赋值为null
        } else if (target === null) {
          result = null;
          // 判断如果当前的值是一个RegExp对象的话，直接赋值
        } else if (target.constructor === RegExp) {
          result = target;
        } else {
          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {};
          for (let i in target) {
            result[i] = this.deepClone(target[i]);
          }
        }
        // 如果不是对象的话，就是基本数据类型，那么直接赋值
      } else {
        result = target;
      }
      // 返回最终结果
      return result;
    },
    structuraClone (obj) {
      return new Promise(resolve => {
        const { port1, port2 } = new MessageChannel()
        port2.onmessage = ev => resolve(ev.data)
        port1.postMessage(obj)
      })
    },
    async test () {
      var obj = {
        a: "hello",
        b: {
          a: "world",
          b: 21,
        },
        c: ["Bob", "Tom", "Jenny"],
        d: /1346/,
      };
      let temp = Object.assign({}, obj)
      var cloneObj = await this.structuraClone(temp);
      console.log(cloneObj.a);
      console.log(cloneObj.b);
      console.log(cloneObj.c);
      console.log(cloneObj.d);
      obj.a = "change hello";
      obj.b.a = "change world";
      console.log("after", cloneObj.a);
      console.log("after", cloneObj.b);
      console.log("after", cloneObj.c);
      console.log("after", cloneObj.d);
    }
  },
  mounted() {
    // this.test()
  }
};
</script>
